<script lang="ts" setup>
import { ref,inject,onMounted } from 'vue'
import { useTokenStore } from '../stores/token'
const axios = inject('axios') //注入 axios
import { useRouter } from 'vue-router'
import CryptoJS from 'crypto-js';
// 创建路由对象，用于编程式导航
const router = useRouter()
// 创建 Token 状态管理 Store
const userStore = useTokenStore()
//用户数据
const user = ref({})

//解密token
function getToken() {
  const encryptedToken = localStorage.getItem('token');
  if (encryptedToken) {
    const secretKey = 'your_secret_key'; // 使用相同的密钥
    const bytes = CryptoJS.AES.decrypt(encryptedToken, secretKey);
    const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
    return decryptedToken;
  }
  return null;
}

//获取用户信息
function initUser() {
  console.log('获取用户信息')
  //判断用户是否登录
  //判断用户是否登录
  const Token = getToken();
  console.log('Token:' + Token)
  if (Token != '') {
    axios({
      method: 'get',
      url: 'http://localhost:8080/user/getuser',
      headers: {
        Authorization: 'Bearer ' + Token
      }
    })
      .then(function (response) {
        if (response.data.code == '200') {
          user.value = response.data.user
          console.log("用户信息获取成功：" + JSON.stringify(response.data.user))
          console.log("用户信息获取成功：" + response.data.user.uname)
          user.value = response.data.user
          console.log("user.value:=====>" + user.value)
          //初始化表单
          dataForm.uname = user.value.uname
          dataForm.phone = user.value.phone
          dataForm.user_synopsis = user.value.user_synopsis
          dataForm.email = user.value.email
          dataForm.account = user.value.account
          // 仅在用户上传新头像后更新 headlmg
          if (user.value.headlmg) {
            dataForm.headlmg = user.value.headlmg; // 保留用户头像的值
            avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL
          }
          console.log("user.headlmg:" + user.value.headlmg)
          // avatarUrl.value = '/svr/api/image/display/head/' + user.value.avatar
          //avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL 
          console.log("user.avater:" + avatarUrl.value)
          console.log("user:" + user.value)
        }
      })
      .catch(function (error) {
        console.log(error)
        console.log("过期：" + error.response.status)
        if (error.response.status == 401) {
          console.log("过期2：" + error.response.status)
          token.value = ''
          userStore.setToken('')

          //提示
          ElMessage({
            message: '请重新登录',
            type: 'success',
            plain: true
          })
          // router.push('/login')
        }
      })
  }
}
// 完成初始渲染并创建 DOM 节点后，进行页面加载
onMounted(() => {
  //初始化数据
  initUser();
})
</script>

<template>
    <div class="top">
        <img src="../img/Logo.png" alt="maxlogo" class="logo">
        <img src="../img/gongzuotai.png" alt="minlogo" class="logo2">
        <span class="nav-item" @click="router.push('/')">首  页</span>
        <span class="nav-item">专  栏</span>
        <span class="nav-item">资  讯</span>
        <img src="../img/tongzhi.png" alt="通知" class="notification-icon">
        <img :src="'http://localhost:8080/api/images/'+user.headlmg" alt="头像" class="user-avatar">
    </div>
</template>

<style scoped>
.top {
    width: 100%;
    height: 100px;
    display: flex;
    /* 启用 Flexbox */
    align-items: center;
    /* 垂直居中对齐 */
    padding: 0 0px;
    /* 内边距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 外阴影设置 */
    background-color: white; /* 背景颜色可选 */
}

.logo {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 10px; 
}

.logo2 {
    width: 200px;
    height: 100px;
    margin-right: 40px;
}

.nav-item {
    display: flex;
    /* 启用 Flexbox */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    width: 100px;
    height: 80px;
    padding: 0px 10px;
    /* margin-left: 10px; */
    font-weight: bold;
    /* background-image: url('../img/竹简文字背景.png'); */
    /* 将其替换为您背景图片的相对路径。确保路径是相对于 CSS 文件的 */
    /* background-size: cover; */
    /* 根据需要调整图片大小 ;cover 确保背景图片覆盖整个 .nav-item 元素。可以根据需要使用其他值，如 contain 或指定宽高 100%*/
    /* background-repeat: no-repeat; */
    /* 防止背景图重复 ;设置为 no-repeat 可以确保背景图片只出现一次。*/
    /* background-position: center; */
    /* 背景图位置居中 */
}

.user-avatar {
    height: 60px;
    float: right;
    margin-right: 10px;
}

.notification-icon {
    height: 45px;
    margin-left: 20px;
    /* 添加左边距 */
    margin-left: auto;
    margin-right: 30px;
}
</style>